.container {
  padding-top: 135rpx;  //给自定义navBar腾出空间
  padding-bottom: 150rpx; //给自定义tabBar腾出空间
  background-color: rgb(245, 245, 245);
}

.divider {
  padding: 5rpx 0;
  background-color: #fff;
  view {
    border-top: 1px solid rgb(241, 241, 241);
    width: 94%;
    margin: 0 auto;
  }
}

.swiper-container {
  background-color: #fff;
  height: 301.5rpx;
  swiper-item {
    box-sizing: border-box;
    padding: 15rpx 25rpx;
    // height: auto;
    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
}

.main-btn {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  text-align: center;
  background-color: #fff;

  .main-btn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .icon {
    margin-bottom: 10rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #ef7770;
    font-size: 23rpx;
    .iconfont {
      font-size: 36rpx;
      line-height: 80rpx;
      color: #fff;
    }
  }
}

// .header {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   padding: 0 25rpx;
//   .title {
//     display: flex;
//     align-items: center;
//     font-size: 30rpx;
//     font-weight: bold;
//     .iconfont {
//       color: #d43c33;
//     }
//   }

//   .btn {
//     padding: 5rpx 15rpx;
//     border: 1px solid rgb(241, 241, 241);
//     border-radius: 15rpx;
//     transition: color 200ms;
//     font-size: 18rpx;
//     &:active {
//       color: #d43c33;
//     }
//   }
// }

.recommed {
  padding-top: 15rpx;
  margin-bottom: 15rpx;
  background-color: #fff;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.list {
  display: flex;
  padding-top: 10rpx;
  height: 520rpx;
}

.item {
  flex-shrink: 0; //!有这一行才能让flex的子元素不被压缩！
  width: 660rpx;
  padding-left: 10rpx;

  &:last-child {
    padding-right: 30rpx;
  }

  .shadow {
    margin: 15rpx;
    box-shadow: 0 0 15rpx #00000022;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 30rpx;
  }

  .title {
    font-size: 30rpx;
    text-align: center;
  }
  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 20rpx;
    }
    .name {
      width: 340rpx;
      display: -webkit-box; /* 开启-webkit-box */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.rank,.album {
  padding: 20rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 15rpx;
}

.album {
  .list{
    height: 400rpx;
  }
  .item {
    padding-left: 25rpx;
    .main {
      .album-name {
        display: -webkit-box; /* 开启-webkit-box */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 300rpx;
        font-size: 24rpx;
        margin-left: 20rpx;
      }
      .name {
        width: 140rpx;
        font-size: 18rpx;
        color: #ccc;
      }
    }
  }
}
